<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            font-family: 微软雅黑;
        }
        
        .container {
            box-sizing: border-box;
            width: 1535px;
            height: 750px;
            margin: 0 auto;
            position: relative;
            background-color: #ededed;
            padding-top: 80px;
        }
        
        header {
            width: 1300px;
            height: 580px;
            background-color: white;
            margin: 0 auto;
        }
        
        .one {
            position: absolute;
            left: 430px;
            top: 180px;
            z-index: 1;
            box-shadow: 0px 0px 20px#dfdfdf;
        }
        
        .second {
            box-sizing: border-box;
            background-color: #eed0cb;
            width: 350px;
            height: 250px;
            position: absolute;
            left: 470px;
            bottom: 40px;
            z-index: 2;
            padding-left: 40px;
            padding-top: 55px;
            padding-right: 90px;
            box-shadow: 0px 0px 20px#dedede;
        }
        
        .third {
            box-sizing: border-box;
            background-color: #262237;
            width: 450px;
            height: 590px;
            position: absolute;
            left: 760px;
            top: 30px;
            padding-left: 60px;
            padding-top: 150px;
            padding-right: 160px;
        }
        
        h4 {
            color: #bb8ccc;
            margin-bottom: 20px;
        }
        
        .black {
            font-size: 12px;
            text-align: justify;
        }
        
        .white {
            font-size: 12px;
            color: #4c4a4f;
            text-align: justify;
        }
        
        .btn1 {
            color: white;
            text-align: center;
            text-decoration: none;
            display: block;
            border: 2px solid;
            line-height: 23px;
            width: 130px;
            height: 23px;
            margin-top: 20px;
        }
        
        h3 {
            color: white;
            margin-bottom: 30px;
        }
        
        .btn2 {
            color: #5fc5b5;
            text-decoration: none;
            font-size: 13px;
            background-color: white;
            text-align: center;
            display: block;
            width: 110px;
            height: 25px;
            line-height: 25px;
            margin-top: 60px;
        }
    </style>
</head>


<body>
    <div class="container">
        <header>
            <img class="one" src="http://via.placeholder.com/350" alt="">
            <div class="second">
                <h4>Experience</h4>
                <p class="black">Arcut in Arcut in nulla Arcut in nulla Arcut in nullaArcutin nulla Arcut innulla Arcut in nullaArcut in nulla
                    <a class="btn1" href="#">VIEW PORTFOLIO</a>
            </div>
            <div class="third">
                <h3>Philosophy</h3>
                <p class="white">Arcut in nulla Arcut in nulla Arcut in nulla Arcut in nullaArcutin nulla Arcut innulla Arcut in nullaArcut in nulla Arcut in nulla Arcut in nullaArcut in nulla</p>
                <a class="btn2" href="#">LEARN MORE</a>
            </div>
        </header>
    </div>
</body>

</html>